<template>
  <div class="singer">
  	<list-view :data="singers"></list-view>
  </div>
</template>

<script type="text/ecmascript-6">
import ListView from 'base/listview/listview'
  import { getSingerList } from 'api/singer'
  import { ERR_OK } from 'api/config'
  import Singer from 'common/js/singer'
  const HOT_SINGER_LEN = 10
  const HOT_NAME = '热门'
  export default {
    data () {
    	return {
    		singers: []
    	}
    },
    created () {
    	this._getSingerList()
    },
    components: {
    	ListView
    },
    methods: {
    	_getSingerList() {
        getSingerList().then((res) => {
          if (res.code === ERR_OK) {
            this.singers = this._normalizeSinger(res.data.list)
          }
        })
      },
    	//这个函数是整理出热门的数组
    	_normalizeSinger (list) {
    		//建立一个对象将热门数组放进对象中然后forEach，push
         let map = {
          hot: {
            title: HOT_NAME,
            items: []
          }
        }
        list.forEach((item, index) => {
          if (index < HOT_SINGER_LEN) {
            map.hot.items.push(new Singer({
              name: item.Fsinger_name,
              id: item.Fsinger_mid
          		//这个avatar是图片地址拼接出来的
          		//用一个singer将avatar封装起来了
          	}))
          }
          //将Findex赋值为key判断map里不存在key就向map里添加一个为key的对象就像hot是一样的
          const key = item.Findex
          if (!map[key]) {
          	map[key] = {
          		title: key,
          		items: []
          	}
          }
           map[key].items.push(new Singer ({
             name: item.Fsinger_name,
            id: item.Fsinger_mid
            }))
        })
        //丁一两个空数组将hot和字母区分出来为了得到有序列表
        let hot = []
        let ret = []
         for (let key in map) {
           let  val = map[key]
           if (val.title.match(/[a-zA-Z]/)) {
           	ret.push(val)
           }else if (val.title === HOT_NAME) {
            hot.push(val)
           }
         }
         //做排序
         ret.sort((a,b) => {
         	return a.title.charCodeAt(0) - b.title.charCodeAt(0)
         })
         //将两个数组拼接起来
         return hot.concat(ret)
    	}
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .singer
  	position: fixed
  	top: 88px
  	bottom: 0
  	width: 100%
</style>